<template>
  <div class="conMain" >
    <el-card  class="box-card" >
      <div slot="header" class="topfix">
          <div style="">
            <el-button v-has="'auth/rule/add'"  type="primary" size="mini" class="addBtn" @click="add()"><i class="el-icon-plus" /> 添加菜单</el-button>
          </div>
      </div>
        <el-table v-loading="loading"  row-key="id"  :tree-props="{children: 'childlist', hasChildren: 'hasChildren'}"  :data="list"  style="width: 100%;margin-bottom: 20px;" :empty-text='emtypetxt' >
            <el-table-column prop="" label=""  align="center" width="100px"/>
            <el-table-column prop="id" label="ID"  align="left" width="100px"/>
            <el-table-column prop="title" label="名称" align="left" />
            <el-table-column prop="name" label="规则"  align="left" />
            <el-table-column prop="icon" label="图标"  align="left" >
              <template slot-scope="scope">
                  <i :class="scope.row.icon" />
              </template>
            </el-table-column>
            <el-table-column prop="url" label="路由"  align="left" />
            <el-table-column prop="ismenu" label="菜单"  align="center" >
              <template slot-scope="scope">
                  <el-switch
                      v-model="scope.row.ismenu"
                      active-color="#13ce66"
                      :active-value= "1"
                      :inactive-value= "0"
                      @change="changem(scope.row.id,$event)"

                  >
                  </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="weigh" label="排序" align="center"  />
            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status === 'normal'" type="success" size="mini" disable-transitions>正常</el-tag>
                <el-tag v-if="scope.row.status === 'hidden'" type="info" size="mini" disable-transitions>禁用</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                  <el-button v-has="'auth/rule/edit'" type="primary" size="mini" icon="el-icon-edit" title='编辑' plain   @click="edit(scope.row.id)"></el-button>
                  <el-button v-has="'auth/rule/del'" type="danger" size="mini" icon="el-icon-delete" title='删除' plain v-if="scope.row.id>26?true:false" @click="del(scope.row.id)"></el-button>
              </template>
            </el-table-column>
        </el-table>
    </el-card>
    <el-dialog :title="sub.id==0?'添加菜单':'编辑菜单'"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    center  width="30%">
      <el-form ref="ruleForm" :model="sub" :rules="rules" label-width="110px" class="dialogForm">
        <el-form-item label="菜单" prop="ismenu">
            <el-radio-group v-model="sub.ismenu"  @change="changisMenu">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="上级菜单" prop="pid">
          <el-select v-model="sub.pid"    placeholder="请选择菜单">
            <el-option
              v-for="(item,index) in gplist"
              :key="item.id"
              :label="item.title"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称" prop="title">
          <el-input v-model="sub.title" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="规则" prop="name">
          <el-input v-model="sub.name" placeholder="控制器/方法" />
        </el-form-item>
        <el-form-item label="路由" prop="url">
          <el-input v-model="sub.url" placeholder="如果为左侧菜单,则必填,顶级菜单为'#'" />
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input v-model="sub.icon" placeholder="el-icon 图标" />
        </el-form-item>
        <el-form-item label="排序" prop="weigh">
          <el-input v-model.number="sub.weigh" placeholder="数字越大越靠前" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
           <el-input type="textarea" v-model="sub.remark"></el-input>
        </el-form-item>
        <el-form-item label="状态"  prop="status">
            <el-radio-group v-model="sub.status"  @change="changeStatus">
              <el-radio label="normal">正常</el-radio>
              <el-radio label="hidden">禁用</el-radio>
            </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="handleCalcel">取 消</el-button>
        <el-button size="medium" type="primary" @click="subForm('ruleForm')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { rule_index,rule_add,rule_add_post,rule_edit,rule_edit_post,rule_del,rule_multi } from '@/api/auth'
export default {
  data() {
    return {
      isopen:1,
      dialogVisible: false,
      loading:true,
      emtypetxt:'',
      list: [],
      gplist:[],
      sub:{
        id:0,
        ismenu:'1',
        pid:0,
        title:'',
        name:'',
        icon:'',
        weigh:'',
        remark:'',
        status:'normal',
        url:'',
      },
      rules: {
          pid: [
              { required: true, message: '请选择上级菜单', trigger: 'blur' },
          ],
          title: [
              { required: true, message: '名称不能为空', trigger: 'blur' },
          ],
          name: [
              { required: true, message: '规则不能为空', trigger: 'blur' },

          ],
      },
    }
  },
  created() {
    this.rulelist()
  },
  methods: {
    rulelist() {
      this.emtypetxt='加载中...';
      this.loading=true;
      rule_index().then(res => {
        this.list=res.data.list
        this.loading = false
        if(this.list.length==0){
          this.emtypetxt='暂无数据'
        }
      })
    },
    changem(id,val){
      var pp="ismenu="+val;
      rule_multi({ids:id,params:pp}).then(res => {
          this.$message({
            message:res.msg,
            type: 'success',
            duration: 1000
          })
      })
    },
    //添加
    add(){
      this.sub.id=0;
      this.resetForm('ruleForm');
      rule_add().then(res => {
        if(res.code==1){
            this.gplist=res.data.ruledata;
            this.dialogVisible=true;
        }
      })
    },
    // 切换状态
    changeStatus(val) {
      this.sub.status = val
    },
    // 切换菜单
    changisMenu(val) {
      this.sub.ismenu = val
    },
    //编辑
    edit(id){
      this.resetForm('ruleForm');
      rule_edit({id:id}).then(res => {
            this.gplist=res.data.ruledata
            let row=res.data.row
            this.sub={
              id:row.id,
              ismenu:row.ismenu,
              pid:row.pid,
              title:row.title,
              name:row.name,
              icon:row.icon,
              weigh:row.weigh,
              remark:row.remark,
              status:row.status,
              url:row.url,
            };
            this.dialogVisible=true;
      })
    },
    //重置表单
    resetForm(formName)
    {
       if (this.$refs[formName]!==undefined) {
          this.$refs[formName].resetFields();
       }
    },
    // 取消
    handleCalcel() {
      this.dialogVisible = false
    },
    subForm(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
              if(this.sub.id>0){
                rule_edit_post(this.sub).then(res => {
                    this.$message.success(res.msg);
                    this.dialogVisible = false
                    this.rulelist()
                })
              }else{
                rule_add_post(this.sub).then(res => {
                    this.$message.success(res.msg);
                    this.dialogVisible = false
                    this.rulelist()
                })
              }
            } else {
              return false;
            }
        });
    },
    del(id){
      let _this=this;
      _this.$modalSure().then(() => {
          rule_del({id:id}).then(res => {
              _this.$message.success(res.msg);
              _this.rulelist()
          })
      })
    }
  },
}
</script>
<style lang="scss" scoped>
</style>
